{% extends "@XiaoZhu/base/frame.html.twig" %}

{% block content_header %}
    <div class="page-slider margin-bottom-35">
        <!--LayerSlider begin-->
        <div id="layerslider" style="width: 100%; height: 494px; margin: 0 auto;">
            <!--LayerSlider layer-->
            <div class="ls-layer ls-layer1" style="slidedirection: right; transition2d: 24,25,27,28; ">
                <img src="{{ asset(slider.layer1) }}" class="ls-bg" alt="Slide background">
                <div class="ls-s-1 title" style=" top: 96px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                    宫廷<strong>小主</strong>来了
                </div>
                <div class="ls-s-1 mini-text" style=" top: 338px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; showuntil : 4000; white-space: nowrap;">
                    小主是一家专门做饰品的网站！
                </div>
            </div>

            <!--LayerSlider layer-->
            <div class="ls-layer ls-layer2" style="slidedirection: right; transition2d: 110,111,112,113; ">
                <img src="{{ asset(slider.layer2) }}" class="ls-bg" alt="Slide background">
                <div class="ls-s-1 ls-title title" style=" top: 40%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                    <strong class="title">心情</strong>
                    故事
                    <em class="title">小主</em>
                </div>

                <div class="ls-s-2 ls-price title" style=" top: 50%; left: 45%; slidedirection : fade; slideoutdirection : fade; durationout : 109750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
                    <b>均价</b>
                    <strong><span>&yen;</span>200</strong>
                </div>

                <a href="#" class="ls-s-1 ls-more mini-text" style=" top: 72%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; display: inline-block; white-space: nowrap;">
                    浏览产品信息
                </a>
            </div>

            <!--LayerSlider layer-->
            <div class="ls-layer ls-layer3" style="slidedirection: right; transition2d: 92,93,105; ">
                <img src="{{ asset(slider.layer3) }}" class="ls-bg" alt="Slide background">

                <div class="ls-s-1 ls-title" style=" top: 83px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                    饰品百货
                    <strong>小主商城</strong>
                    开始你的饰品欣赏之旅！
                </div>

                <div class="ls-s-1" style=" top: 333px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap; font-size: 20px; font: 20px 'Open Sans Light', sans-serif;">
                    <a href="#" class="ls-buy">
                        现在购买
                    </a>
                    <div class="ls-price">
                        <span>所有产品一律</span>
                        <strong>八折优惠</strong>
                    </div>
                </div>
            </div>

            <div class="ls-layer ls-layer4" style="slidedirection: right; transition2d: 24,25,27,28; ">
                <img src="{{ asset(slider.layer4) }}" class="ls-bg" alt="Slide background">
                <div class="ls-s-1 title" style=" top: 96px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                    宫廷<strong>小主</strong>来了！！！
                </div>
                <div class="ls-s-1 mini-text" style=" top: 338px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; showuntil : 4000; white-space: nowrap;">
                    小主是一家<br >专门做饰品的网站！！！
                </div>
            </div>

            <!--LayerSlider layer-->
            {#<div class="ls-layer ls-layer5" style="slidedirection: right; transition2d: 110,111,112,113; ">#}
                {#<img src="{{ asset(slider.layer5) }}" class="ls-bg" alt="Slide background">#}

                {#<div class="ls-s-1 title" style=" top: 35%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">#}
                    {#The most<br>#}
                    {#wanted bijouterie#}
                {#</div>#}

                {#<div class="ls-s-1 mini-text" style=" top: 70%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">#}
                    {#<span>Lorem ipsum and</span>#}
                    {#<a href="#">Buy It Now!</a>#}
                {#</div>#}
            {#</div>#}
        </div>
        <!--LayerSlider end-->
    </div>
{% endblock %}

{% block content_main %}
    <div class="main">
        <div class="container">
            <!-- BEGIN SALE PRODUCT & NEW ARRIVALS -->
            <div class="row margin-bottom-40">
                <!-- BEGIN SALE PRODUCT -->
                <div class="col-md-12 sale-product">
                    <h2>最新商品</h2>
                    <div class="bxslider-wrapper">
                        <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="5" data-slide-margin="15">
                            {% for product in ProductNew %}
                                {% set tag = "new" %}
                                {% include("XiaoZhuBundle:inc:ProductListItemNew.html.twig") %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <!-- END SALE PRODUCT -->
            </div>
            <!-- END SALE PRODUCT & NEW ARRIVALS -->

            {% block xiaozhu_item_1 %}
            <div class="row margin-bottom-40 myitem1">
                <h2>饰品--心情</h2>
                {% for art in Art1 %}
                    <div class="col-lg-3 col-md-4 col-xs-6">
                        <div class="product-myitem1">
                            <div class="product-item-img">
                                <a href="{{ path("showArticle" , {"id":art.id}) }}" target="_blank"><img src="{{ asset(art.cover) }}" style="width: 100%; height: 156px; padding: 10px"></a>
                            </div>
                            <div class="product-item-info" style="width: 100%; padding-left: 10px">
                                <div class="title"><a href="{{ path("showArticle" , {"id":art.id}) }}">{{ art.title }}</a></div>
                                <div class="metas clearfix">
                                    <p>{{ art.introduction }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% endblock %}

            {% block xiaozhu_item_2 %}
            {#品牌活动，核心内容是厂家为了推广自己的品牌而搞得促销活动。这个地方的活动是各个品牌举办的#}
            <div class="row margin-bottom-40 myitem2">
                <h2>品牌活动</h2>
                {% for i in 1..8 %}
                    <div class="col-lg-3 col-md-4 col-xs-6">
                        <div class="product-myitem1">
                            <div class="product-item-img">
                                <a href="#" target="_blank"><img src="{{ asset(home_cat.cat2) }}" style="width: 100%; padding: 10px"></a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% endblock %}

            {% block xiaozhu_item_3 %}
            {#商城特惠，是以商城的身份，按照某个主题而发起的活动。活动的主办方是商城，各个品牌可以选择参加，也可以选择不参加#}
            <div class="row margin-bottom-40 myitem3">
                <h2>---商城特惠---</h2>
                {% for i in 1..8 %}
                    <div class="col-lg-3 col-md-4 col-xs-6">
                        <div class="product-myitem1">
                            <div class="product-item-img">
                                <a href="#" target="_blank"><img src="{{ asset(home_cat.cat3) }}" style="width: 100%; padding: 10px"></a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% endblock %}

            {% block xiaozhu_item_xianglian %}
            {#项链大类，在这个大类里面，里面的每一项都是有两种可能，要么是在这一大类里面，按照某一主题而形成的一个小类；要么就是首页主推的某一个产品#}
            <div class="row margin-bottom-40 myitem3" style="padding: 20px 0; background: #FFF">
                <h2  style="border-bottom: 1px solid #EEE;line-height: 30px;border-left: 5px solid #e94d1c;padding-left: 12px;">
                    项饰专区
                    <a class="more pull-right" href="{{ path("listProduct") }}?category=2">查看更多</a>
                </h2>
                <div class="indexWindowProduct">
                    <div class="col-md-4">
                        <div class="product-main-image">
                            <img src="{{ asset(Neck[3].cover) }}" alt="Cool green dress with red bell" class="img-responsive">
                        </div>
                    </div>
                    <div class="col-md-8">
                        {% for product in Neck %}
                            <div class="col-lg-3 col-md-4 col-xs-6">
                                <div class="product-myitem1">
                                    <div class="product-item-img" style="border-bottom: 1px solid #FFF">
                                        <a href="{{ path("productShow") }}?id={{ product.id }}" target="_blank"><img title="{{ product.name }}" src="{{ asset(product.cover) }}" style="width: 100%; padding: 10px"></a>
                                    </div>
                                    <div class="product-item-info" style="width: 100%; padding: 10px 0 0 10px;border-top: 1px solid #EEE">
                                        <div class="title textNoWrap">
                                            <a href="{{ path("productShow" , {"id":product.id}) }}" style="color:#222;" title="{{ product.name }}">{{ product.name }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        {% for product in Neck %}
                            <div class="col-lg-3 col-md-4 col-xs-6">
                                <div class="product-myitem1">
                                    <div class="product-item-img" style="border-bottom: 1px solid #FFF">
                                        <a href="{{ path("productShow") }}?id={{ product.id }}" target="_blank"><img title="{{ product.name }}" src="{{ asset(product.cover) }}" style="width: 100%; padding: 10px"></a>
                                    </div>
                                    <div class="product-item-info" style="width: 100%; padding: 10px 0 0 10px;border-top: 1px solid #EEE">
                                        <div class="title textNoWrap">
                                            <a href="{{ path("productShow" , {"id":product.id}) }}" style="color:#222;" title="{{ product.name }}">{{ product.name }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endblock %}

            {% block xiaozhu_item_erzhui %}
            {#耳坠大类，在这个大类里面，里面的每一项都是有两种可能，要么是在这一大类里面，按照某一主题而形成的一个小类；要么就是首页主推的某一个产品#}
            <div class="row margin-bottom-40 myitem3">
                <h2>【耳坠】</h2>
                {% for product in Ear %}
                    <div class="col-lg-3 col-md-4 col-xs-6">
                        <div class="product-myitem1">
                            <div class="product-item-img">
                                <a href="{{ path("productShow") }}?id={{ product.id }}" target="_blank"><img src="{{ asset(product.cover) }}" style="width: 100%; padding: 10px"></a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% endblock %}

            {% block xiaozhu_item_toushi %}
            {#头饰大类，在这个大类里面，里面的每一项都是有两种可能，要么是在这一大类里面，按照某一主题而形成的一个小类；要么就是首页主推的某一个产品#}
            <div class="row margin-bottom-40 myitem3">
                <h2>【头饰】</h2>
                {% for product in Hair %}
                    <div class="col-lg-3 col-md-4 col-xs-6">
                        <div class="product-myitem1">
                            <div class="product-item-img">
                                <a href="{{ path("productShow") }}?id={{ product.id }}" target="_blank"><img src="{{ asset(product.cover) }}" style="width: 100%; padding: 10px"></a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% endblock %}

        </div>
    </div>
{% endblock %}

{% block content_footer %}
    <div class="brands">
        <div class="container">
            <div class="row">
                <div class="bxslider-wrapper">
                    <ul class="bxslider" data-slides-phone="1" data-slides-tablet="3" data-slides-desktop="6" data-slide-margin="15">
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/1.jpg") }}" alt="canon" title="canon"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/2.jpg") }}" alt="esprit" title="esprit"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/3.jpg") }}" alt="gap" title="gap"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/4.jpg") }}" alt="next" title="next"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/5.jpg") }}" alt="puma" title="puma"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/1.jpg") }}" alt="zara" title="zara"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/2.jpg") }}" alt="canon" title="canon"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/3.jpg") }}" alt="esprit" title="esprit"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/4.jpg") }}" alt="gap" title="gap"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/5.jpg") }}" alt="next" title="next"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/1.jpg") }}" alt="puma" title="puma"></a></li>
                        <li><a href="product-list.html"><img src="{{ asset("bundles/xiaozhu/temp/brands/2.jpg") }}" alt="zara" title="zara"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block product_pop_up %}
    {% set ProductPopUps = ProductNew %}
    {% include("XiaoZhuBundle:inc:ProductPopUps.html.twig") %}
{% endblock %}
{#test#}